<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <title>智慧农业物联网管理系统</title>
		<!-- Vendor styles -->
		<link rel="stylesheet" href="vendors/bower_components/material-design-iconic-font/dist/css/material-design-iconic-font.min.css">
		<link rel="stylesheet" href="vendors/bower_components/animate.css/animate.min.css">
		<link rel="stylesheet" href="vendors/bower_components/jquery.scrollbar/jquery.scrollbar.css">
		<link rel="stylesheet" href="vendors/bower_components/lightgallery/dist/css/lightgallery.min.css">
		<link rel="stylesheet" href="vendors/bower_components/select2/dist/css/select2.min.css">
		<link rel="stylesheet" href="vendors/bower_components/dropzone/dist/dropzone.css">
		<link rel="stylesheet" href="vendors/bower_components/flatpickr/dist/flatpickr.min.css" />
		<link rel="stylesheet" href="vendors/bower_components/nouislider/distribute/nouislider.min.css">
		<link rel="stylesheet" href="vendors/bower_components/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css">
		<link rel="stylesheet" href="vendors/bower_components/trumbowyg/dist/ui/trumbowyg.min.css">
		<link rel="stylesheet" href="vendors/bower_components/rateYo/min/jquery.rateyo.min.css">
         <link rel="stylesheet" href="css/ele.css">
         <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=pC5djRyIt3IV7myPb6RT2GUAAsAWida2"></script>
         <style type="text/css">
         	.el-dialog>.el-dialog__body>.el-form>.el-form-item>.el-form-item__label{
         		color: #000000;
         	}
         	body, html {
    width: 100%;
    height: 100%;
    margin: 0;
}

#allmap {
    height: 92%;
    width: 100%;
}
         </style>

		<!-- App styles -->
		<link rel="stylesheet" href="css/app.min.css">

	</head>

	<!---->

	 <body data-sa-theme="1">
        <main class="main" id='app'>
            <div class="page-loader">
                <div class="page-loader__spinner">
                    <svg viewBox="25 25 50 50">
                        <circle cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
                    </svg>
                </div>
            </div>
            <h1 id="top-title">智慧农业物联网管理系统2.0</h1>
            <header class="header">
                <div class="navigation-trigger hidden-xl-up" data-sa-action="aside-open" data-sa-target=".sidebar">
                    <i class="zmdi zmdi-menu"></i>
                </div>
                 
                <div class="logo hidden-sm-down">
                    <h1><a href="index.html" style=""> 智慧农业物联网管理系统2.0</a></h1>
                </div>

                <ul class="top-nav">
                    <!--1-->

                    <li class="hidden-xs-down">
                        <a href="index.html" class="top-nav__themes" data-sa-action="aside-open" data-sa-target=".themes"><i class="zmdi zmdi-palette"></i></a>
                    </li>
                </ul>

                <div class="clock hidden-md-down">
                    <div class="time">
                        <span class="time__hours"></span>
                        <span class="time__min"></span>
                        <span class="time__sec"></span>
                    </div>
                </div>
            </header>
             
                <aside class="sidebar">
                <div class="scrollbar-inner">
                    <div class="user">
                        <div class="user__info" data-toggle="dropdown">
                            <img class="user__img" src="demo/img/profile-pics/8.jpg" alt="">
                            <div>
                                <div class="user__name">{{userName}}</div>
                                <div class="user__email">{{userPhone}}</div>
                            </div>
                        </div>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="userXiugai.html">个人资料</a>
                            <a class="dropdown-item" href="../login/index.html">退出</a>
                        </div>
                    </div>
                    <!--菜单开始-->
                    <ul class="navigation" v-for="(value, key, index) in ment" >
                        <li class="@@indexactive"  v-if="!value.childMenu">
                        	<a :href="value.url">
                        		<i :class="value.icon"></i>{{value.name}}
                        	</a>
                        </li>
                        
                        <li class="navigation__sub @@typeactive" v-else>
                            <a :href="value.url">
                            	<i :class="value.icon"></i>{{value.name}}
                            </a>
                            <ul >
                                <li v-for="(value, key, index) in value.childMenu" class="@@navigation__active"><a :href="value.url">{{value.name}}</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </aside>
			
			
			<div class="themes">
				<div class="scrollbar-inner">
					<a href="index.html" class="themes__item active" data-sa-value="1"><img src="img/bg/1.jpg" alt=""></a>
					<a href="index.html" class="themes__item" data-sa-value="2"><img src="img/bg/2.jpg" alt=""></a>
					<a href="index.html" class="themes__item" data-sa-value="3"><img src="img/bg/3.jpg" alt=""></a>
					<a href="index.html" class="themes__item" data-sa-value="4"><img src="img/bg/4.jpg" alt=""></a>
					<a href="index.html" class="themes__item" data-sa-value="5"><img src="img/bg/5.jpg" alt=""></a>
					<a href="index.html" class="themes__item" data-sa-value="6"><img src="img/bg/6.jpg" alt=""></a>
					<a href="index.html" class="themes__item" data-sa-value="7"><img src="img/bg/7.jpg" alt=""></a>
					<a href="index.html" class="themes__item" data-sa-value="8"><img src="img/bg/8.jpg" alt=""></a>
					<a href="index.html" class="themes__item" data-sa-value="9"><img src="img/bg/9.jpg" alt=""></a>
					<a href="index.html" class="themes__item" data-sa-value="10"><img src="img/bg/10.jpg" alt=""></a>
				</div>
			</div>



			<section class="content">
				<div class="content__inner">
					<div class="card">
						<div class="card-body">
							<h4 class="card-title">设备地图</h4>
                            <h6 class="card-subtitle">在这里可以很方便的进行设备地图的数据查看.</h6>

                     <!--<template>	
						  <el-form :model="queryParams" ref="queryForm" :inline="true">
						     <el-form-item label="区域" prop="gongshiou" >
						          <el-select v-model="quyu" placeholder="请选择" @change="Rolechanges(quyu)">
								    <el-option
								      v-for="item in gongshiou"
								      :key="item.areaId"
								      :label="item.areaName"
								      :value="item.areaId">
								    </el-option>
								  </el-select>
						        </el-form-item>
						
						
						      <el-form-item label="设备" prop="gongshiou1">
						          <el-select  v-model="gongshiou2" placeholder="请选择">
								    <el-option
								      v-for="item in gongshiou1"
								      :key="item.id"
								      :label="item.name"
								      :value="item.id">
								    </el-option>
								  </el-select>
						        </el-form-item>
						
						
						      <el-form-item label="采集时间">
						      	
						      	
						      	 <el-date-picker
						      	 	 value-format="yyyy-MM-dd HH:mm:ss"
								      v-model="dateRange"
								      type="datetimerange"
								      :picker-options="pickerOptions"
								      range-separator="至"
								      start-placeholder="开始日期"
								      end-placeholder="结束日期"
								      align="right">
								    </el-date-picker>
						      </el-form-item>
						      <el-form-item>
						        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
						        <!--<el-button icon="el-icon-refresh"  @click="resetQuery">导出Excel</el-button>-->
						        <!--<el-button icon="el-icon-refresh"  @click="resetQuery">表格展示</el-button>-->
						      <!--</el-form-item>
						    </el-form>
                     </template>-->
                     
                     
<div id="allmap"></div>
<div id="info" style="display:none;width: 250px;height: 126px;z-index: 103;position: absolute;float: left;top: 9.9%;background: #393d49;opacity: 0.8;" onclick="closeInfo()" >
    <table style="padding: 8px 8px 0 8px;" id="info_table" >

    </table>
</div>


					<div class="row lightbox photos"   v-loading="loading" >

                        
                        </div>
					
				</div>
			</section>
		</main>

		

		<!-- Javascript -->
		<!-- Vendors -->
		<script src="vendors/bower_components/jquery/dist/jquery.min.js"></script>
		<script src="vendors/bower_components/popper.js/dist/umd/popper.min.js"></script>
		<script src="vendors/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
		<script src="vendors/bower_components/jquery.scrollbar/jquery.scrollbar.min.js"></script>
		<script src="vendors/bower_components/jquery-scrollLock/jquery-scrollLock.min.js"></script>

		<script src="vendors/bower_components/jquery-mask-plugin/dist/jquery.mask.min.js"></script>
		<script src="vendors/bower_components/select2/dist/js/select2.full.min.js"></script>
		<script src="vendors/bower_components/dropzone/dist/min/dropzone.min.js"></script>
		<script src="vendors/bower_components/moment/min/moment.min.js"></script>
		<script src="vendors/bower_components/flatpickr/dist/flatpickr.min.js"></script>
		<script src="vendors/bower_components/nouislider/distribute/nouislider.min.js"></script>
		<script src="vendors/bower_components/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script>
		<script src="vendors/bower_components/trumbowyg/dist/trumbowyg.min.js"></script>
		<script src="vendors/bower_components/rateYo/min/jquery.rateyo.min.js"></script>
		<script src="vendors/bower_components/jquery-text-counter/textcounter.min.js"></script>
		<script src="vendors/bower_components/autosize/dist/autosize.min.js"></script>

		<!-- Light Gallery -->
		<script src="vendors/bower_components/lightgallery/dist/js/lightgallery-all.min.js"></script>
		<script src="vendors/bower_components/lightgallery/dist/js/newmap.js"></script>
		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
        <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
        <script src="../js/best.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/cookie.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/app.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/ele.js"></script>
        <script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap");
	var point = new BMap.Point(104.34725,31.122456000000003);
	map.centerAndZoom(point, 15);
	
	//创建小狐狸
	var pt = new BMap.Point(104.34725,31.122456000000003);
	var myIcon = new BMap.Icon("/jsdemo/img/fox.gif", new BMap.Size(300,157));
	var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
	map.addOverlay(marker2);              // 将标注添加到地图中
</script>
        <script>
    new Vue({
	el: '#app',
	data:function() {
		return {
			userPhone:null,
			userName:null,
			pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
		      
		},
		open:false,
		    title: "",
	               form:[],
	               rules:[],
	               roleOptions:[],
            value: null,
			quyu:null,
			ment:null,
			chongqing:null,
			parms:null,
			loading: false,
			currentPage: 1,
	        pageSize: 30,
	        currentTotal: 0,
	        gongshiou1:[],
		      gongshiou2:[],
		      gongshiou:[],
		      value:'',
		      queryParams: {
	        pageNum: 1,
	        pageSize: 10,
	        deptName:undefined,
	        roleName: undefined,
	        roleKey: undefined,
	        status: undefined
        },
		      // 日期范围
		      dateRange: [],
		      
		      // 非单个禁用
		      single: true
		      
		       
	}
		},
	mounted() {
//		this.Rolechanges(),
			//获取菜单
		axios(basePath + '/menu/findMenuList.do', {
			method: 'GET',
			mode: 'no-cors',
			headers: {
				'Access-Control-Allow-Origin': '*',
				'Content-Type': 'application/json',
			},
			withCredentials: true,
			credentials: 'same-origin',
		}).then(response => {
			if(response.data.state) {
				this.ment = response.data.data
				this.userPhone=getCookie('userPhone');
						this.userName=getCookie('userName');
					 var b = getCookie('themesitem');
		$("body").attr("data-sa-theme", b)
						
			} else {
				alert(res.data.msg)
				window.location.href = "../login/login.html"
			}

		}).catch(function(error) { // 请求失败处理
			console.log(error);
		});




this.openTishi();
		
		//获取设备 /area/selectAreaByEquipmnt.do /agro_monitor/area/selectAreaByEquipmnt.do
			var data2 = {
		        eqType:1,
		        eqModel:1
	          };
	          var this_=this;
	      ajaxType(basePath + '/area/selectAreaByEquipmnt.do','post',data2,geturl)
	       function geturl(data){
	       	console.log(data)
	        	this_.gongshiou = data.data;
//	        	this.parms = data.parms.totalCount;
	       }	
	       
	       
	       var data2 = {
		        eqType:1,
		        eqModel:1
	          };
		
			
		},	

	methods: {
		//进入页面提示先选择区域
		 openTishi() {
		 	 var flastco="wlw3_is_intro";
		 	var isHas= getCookie(flastco); 
		 	if(isHas!=1){
		 	var this_=this;
	
		 	setTimeout(function(){
		 		 this_.$alert('请选择相应区域，点击搜索，才能获取相应信息', '温馨提示', {
          confirmButtonText: '确定',
          callback: action => {
          	this_.loading = false;
          }
        });
		 	},1000)
		 	addCookie(flastco,1,24*365);
		 	}
		 	
       
      },
      
      handlestatus(data){
      	console.log("123:"+data)
      },
		
		cancel(){
		this.open = false;
//    this.reset();
	},
		handleXiangqing(data){
			
			console.log(data)
			this.form=data;
			this.open = true;
		
		},
		
//		//获取设备
//		Rolechanges(val) {
//			//获取设备 /equipment/findEquipmentByAreaIdAndType.do areaId: val, eqType:"1"
//			var data1 = {
//		        insid: 202022202201221,
//		        status:"on"
//		        
//	          };
//	          var this_=this;
//	      ajaxType(basePath + '/equipment/equipmentRemote.do','post',data1,geturl)
//	       function geturl(data){
//	       	console.log(data)
////	       	this_.gongshiou2 = '';
////	        	this_.gongshiou1 = data.data;
//	      
//	       }		
//					
//		},
//		
		
		//获取设备
		Rolechanges(val) {
			//获取设备 /equipment/findEquipmentByAreaIdAndType.do areaId: val, eqType:"1"
			var data1 = {
		        areaId: val, 
		        eqType:"1" 
	          };
	          var this_=this;
	      ajaxType(basePath + '/equipment/findEquipmentByAreaIdAndType.do','post',data1,geturl)
	       function geturl(data){
	       	console.log(data)
//	       	this_.gongshiou2 = '';
//	        	this_.gongshiou1 = data.data;
	      
	       }		
					
		},
		
		
		
		 open(data_A) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        	var data2 = {
		        monitorId:data_A
	          };
	          var this_=this;
	      ajaxTypec(basePath + '/seedling/deleteSeedingMonitor.do','post',data2,geturl)
	       function geturl(data){
	       	console.log(data)
	       	
	       	if(data.state){
	       		
	       		this_.$message({
            type: 'success',
            message: '删除成功!'
          });
       
	       		
	       		
	       		 var datal={
				pageIndex:this_.currentPage,
				areaId:this_.quyu,
                eqId:this_.gongshiou2,
               startTime:this_.dateRange[0],
               endTime:this_.dateRange[1]
      }
	       		 
//	       		 getCookie('areaId');  getCookie('eqId');  getCookie('startTime');  getCookie('endTime');
	       		 
      this_.getchongqing(datal)
	       	}else{
	       		this_.$message.error(data.msg);
	       		
	       	}
//	        	this_.gongshiou = data.data;
	       }	
        	

        	 }).catch(() => {
          this_.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        	
          
      },
      
      fenxiImg(time){
        var time_ = encodeURIComponent(time);
      	localStorage.setItem('areaId',this.quyu,24*365);
      	localStorage.setItem('eqId',this.gongshiou2,24*365);
      	localStorage.setItem('startTime1', time_);
      	localStorage.setItem('endTime', encodeURIComponent(this.dateRange[1]));
      	addCookie('endTime',this.dateRange[1],24*365);
      	
      	
      	  window.location.href="chongqingfenxi.html"
      },
		
		
	handleSizeChange(val) {
        this.pageSize = val;
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        console.log(`当前页: ${val}`);
        
        var dataa={
				pageIndex:this.currentPage,
				areaId:this.quyu,
                eqId:this.gongshiou2,
                startTime:this.dateRange[0],
               endTime:this.dateRange[1]
      }

        this.getchongqing(dataa)
			
	},
	currentPage(val){
		 console.log(val);
	},
	getchongqing(val){
		 this.loading = true;
		axios(basePath + '/monitor/selectInsectPestMonitorList.do?pageSize=12', {
			method: 'GET',
			mode: 'no-cors',
			headers: {
				'Access-Control-Allow-Origin': '*',
				'Content-Type': 'application/json',
			},
			withCredentials: true,
			credentials: 'same-origin',
			params:val
		}).then(response => {
			if(response.data.state) {
				this.chongqing = response.data.data
//				this.parms = response.data.parms.totalCount
				this.loading = false;
				console.log(response);
				if(response.data.data==''){
					this.$message.error('没有获取到信息哦');
				}
			} else {
				alert(res.data.msg)
				window.location.href = "../login/login.html"
				
			}

		}).catch(function(error) { // 请求失败处理
			console.log(error);
		});
	},
	
			 /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      console.log(this.dateRange);
      console.log(this.quyu)
      console.log(this.gongshiou2)
    
      var datal={
				pageIndex:this.currentPage,
				areaId:this.quyu,
                eqId:this.gongshiou2,
               startTime:this.dateRange[0],
               endTime:this.dateRange[1]
      }
      
      
      //	       		 getCookie('areaId');  getCookie('eqId');  getCookie('startTime');  getCookie('endTime');
      
      
      this.getchongqing(datal)
//    this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
      /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.opentianjian = true;
      this.title = "添加";
    },
    
    fenxi(){
    	console.log()
    },
    shanchu(){
    	console.log()
    }
    
		
		
	}
})</script>

	</body>


</html>
<script src="http://testfood.cn:80/agro_monitor/common/js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
		<script src="http://testfood.cn/agro_monitor/plugins/frame/layui/layui.js?version=1.0" type="text/javascript" charset="utf-8"></script>
		<script src="js/eqMap.js" type="text/javascript" charset="utf-8"></script>